<template>
  <div
      class="container"
      :style="{
      'background-image': `url(${require('@/assets/login.jpg')})`,
    }"
  >
    <van-image
        class="logo"
        width="180px"
        height="180px"
        fit="contain"
        :src="require('../../assets/logo.png')"
    />
    <h3 style="text-align: left; padding-left:10px;">骑手登录：</h3>
    <van-form @submit="onSubmit">
      <van-field
          v-model="formInfo.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          left-icon="manager"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="formInfo.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          left-icon="lock"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
        >登录</van-button
        >
      </div>
    </van-form>
    <van-row type="flex" justify="space-between">
      <van-col span="10" style="text-align: left">
        <router-link to="#" class="link"></router-link>
      </van-col>
      <van-col span="14" style="text-align: right">
        <router-link to="/user/registry" class="link">没有账号? 那就注册一个吧!</router-link>
      </van-col>
    </van-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      formInfo:{
        username: "",
        password: ""
      }
    };
  },
  methods: {
    onSubmit() {
      let url = 'http://localhost:9080/users/login';
      let formInfo = this.qs.stringify(this.formInfo);
      this.axios.post(url,formInfo).then((response)=>{
        let responseBody = response.data;
        if(responseBody.state == 20000){
          let jwt = responseBody.data;
          console.log(jwt);
          localStorage.setItem("jwt",jwt);
          this.$router.replace('/home/receive-hall');
        }else {
          this.$toast.fail(responseBody.message);
        }
      });
    },
  },
};
</script>

<style scoped>
/** 容器样式 */
.container {
  text-align: center;
  height: 100vh;
  background-size: cover;
}
.container .logo {
  margin-top: 60px;
}
.link {
  margin: 0px 20px;
  color: #333;
}
</style>

<style>
.van-field__left-icon .van-icon {
  margin-top: 4px !important;
}
</style>
